import React from "react";
import propTypes from "prop-types";

function TodoFooter(props) {
  console.log(props.finCount(), 111);
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          onClick={(e) => {
            console.log(e.target);
            console.log(e.target.checked);
            console.log(props.changeIsCheckedAll);
            props.changeIsCheckedAll(e.target.checked);
          }}
        />
      </label>
      <span>
        已完成{props.finCount()} / 全部{props.taskList.length}
      </span>
      <button className="btn btn-danger" onClick={props.deleteAllFin}>
        清除已完成任务
      </button>
    </div>
  );
}
TodoFooter.propTypes = {
  taskList: propTypes.array.isRequired,
  finCount: propTypes.func.isRequired,
  deleteAllFin: propTypes.func.isRequired,
  changeIsCheckedAll: propTypes.func.isRequired,
};
export default TodoFooter;
